<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>找回密码 - 青南学长平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #6ab1f7;
            --primary-light: #a8d0fe;
            --secondary: #4a8bc9;
            --accent: #8ec5fc;
            --text: #2c3e50;
            --text-light: #6c757d;
            --background: #f0f8ff;
            --white: #ffffff;
            --card-shadow: 0 8px 20px rgba(106, 177, 247, 0.15);
            --hover-shadow: 0 12px 30px rgba(106, 177, 247, 0.25);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: var(--background);
            color: var(--text);
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* 导航栏样式 */
        header {
            background-color: var(--white);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .logo-icon {
            color: var(--primary);
            font-size: 28px;
        }
        
        .logo-text {
            font-size: 24px;
            font-weight: 700;
            color: var(--primary);
            letter-spacing: -0.5px;
        }
        
        .nav-links {
            display: flex;
            gap: 25px;
        }
        
        .nav-link {
            color: var(--text);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
            padding: 8px 0;
        }
        
        .nav-link:hover {
            color: var(--primary);
        }
        
        .back-button {
            color: var(--text);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: color 0.3s;
            padding: 8px 16px;
            border-radius: 8px;
            background: var(--white);
            border: 1px solid var(--primary-light);
        }
        
        .back-button:hover {
            color: var(--primary);
            border-color: var(--primary);
        }
        
        /* 找回密码内容区域 */
        .reset-section {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            padding: 40px 0;
        }
        
        .reset-container {
            width: 100%;
            max-width: 500px;
            background: var(--white);
            border-radius: 20px;
            padding: 40px;
            box-shadow: var(--card-shadow);
        }
        
        .page-title {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 10px;
            text-align: center;
        }
        
        .page-subtitle {
            color: var(--text-light);
            margin-bottom: 30px;
            text-align: center;
        }
        
        .progress-steps {
            display: flex;
            justify-content: space-between;
            margin-bottom: 40px;
            position: relative;
        }
        
        .progress-steps::before {
            content: '';
            position: absolute;
            top: 15px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--primary-light);
            z-index: 1;
        }
        
        .progress-bar {
            position: absolute;
            top: 15px;
            left: 0;
            height: 2px;
            background: var(--primary);
            z-index: 2;
            transition: width 0.5s ease;
        }
        
        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 3;
        }
        
        .step-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--primary-light);
            color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            transition: all 0.3s;
        }
        
        .step.active .step-icon {
            background: var(--primary);
        }
        
        .step.completed .step-icon {
            background: var(--primary);
        }
        
        .step.completed .step-icon::after {
            content: '\f00c';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
        }
        
        .step-label {
            font-size: 0.9rem;
            color: var(--text-light);
            transition: color 0.3s;
        }
        
        .step.active .step-label {
            color: var(--primary);
            font-weight: 600;
        }
        
        .step-content {
            display: none;
        }
        
        .step-content.active {
            display: block;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text);
        }
        
        .input-with-icon {
            position: relative;
        }
        
        .form-input {
            width: 100%;
            padding: 14px 15px;
            border: 1px solid var(--primary-light);
            border-radius: 10px;
            background-color: var(--white);
            font-size: 1rem;
            transition: all 0.3s;
        }
        
        .form-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(106, 177, 247, 0.15);
        }
        
        .input-icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--primary-light);
        }
        
        .code-input-container {
            display: flex;
            gap: 10px;
        }
        
        .code-input {
            flex: 1;
        }
        
        .send-code-button {
            background: var(--primary);
            color: var(--white);
            border: none;
            border-radius: 10px;
            padding: 14px 20px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            white-space: nowrap;
        }
        
        .send-code-button:hover:not(:disabled) {
            background: var(--secondary);
        }
        
        .send-code-button:disabled {
            background: var(--text-light);
            cursor: not-allowed;
        }
        
        .password-strength {
            margin-top: 10px;
            height: 5px;
            border-radius: 5px;
            background: #f0f0f0;
            overflow: hidden;
        }
        
        .password-strength-bar {
            height: 100%;
            width: 0%;
            transition: width 0.3s, background 0.3s;
        }
        
        .password-requirements {
            margin-top: 10px;
            font-size: 0.85rem;
            color: var(--text-light);
        }
        
        .requirement {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 5px;
        }
        
        .requirement i {
            font-size: 0.8rem;
        }
        
        .requirement.valid {
            color: #28a745;
        }
        
        .requirement.invalid {
            color: var(--text-light);
        }
        
        .form-actions {
            display: flex;
            gap: 15px;
            margin-top: 30px;
        }
        
        .next-button, .submit-button {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: var(--white);
            border: none;
            border-radius: 10px;
            padding: 14px 25px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            flex: 1;
        }
        
        .next-button:hover, .submit-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(106, 177, 247, 0.4);
        }
        
        .back-step-button {
            background: #f8f9fa;
            color: var(--text-light);
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            padding: 14px 25px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .back-step-button:hover {
            background: #e9ecef;
        }
        
        .success-message {
            text-align: center;
            padding: 30px 0;
        }
        
        .success-icon {
            font-size: 4rem;
            color: #28a745;
            margin-bottom: 20px;
        }
        
        .success-text {
            font-size: 1.2rem;
            margin-bottom: 30px;
            color: var(--text);
        }
        
        .login-button {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: var(--white);
            border: none;
            border-radius: 10px;
            padding: 14px 25px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
            display: block;
            text-align: center;
            text-decoration: none;
        }
        
        .login-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(106, 177, 247, 0.4);
        }
        
        /* 页脚样式 */
        footer {
            background-color: var(--white);
            padding: 30px 0;
            margin-top: 40px;
            border-top: 1px solid var(--primary-light);
        }
        
        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .footer-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
            color: var(--primary);
            font-size: 1.2rem;
        }
        
        .footer-links {
            display: flex;
            gap: 20px;
        }
        
        .footer-link {
            color: var(--text-light);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-link:hover {
            color: var(--primary);
        }
        
        .copyright {
            text-align: center;
            margin-top: 30px;
            color: var(--text-light);
            font-size: 0.9rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }
            
            .reset-container {
                padding: 30px 20px;
            }
            
            .progress-steps {
                margin-bottom: 30px;
            }
            
            .step-label {
                font-size: 0.8rem;
            }
            
            .footer-content {
                flex-direction: column;
                gap: 20px;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <div class="container">
            <div class="navbar">
                <div class="logo">
                    <i class="fas fa-graduation-cap logo-icon"></i>
                    <span class="logo-text">青南学长</span>
                </div>
                
                <div class="nav-links">
                    <!-- <a href="index.html" class="nav-link">首页</a>
                    <a href="usercenter.html" class="nav-link">用户中心</a>
                    <a href="#" class="nav-link">我的收藏</a>
                    <a href="#" class="nav-link">消息中心</a> -->
                </div>
                
                <a href="login.html" class="back-button">
                    <i class="fas fa-arrow-left"></i>
                    <span>返回登录</span>
                </a>
            </div>
        </div>
    </header>

    <!-- 找回密码内容区域 -->
    <section class="reset-section">
        <div class="container">
            <div class="reset-container">
                <h1 class="page-title">找回密码</h1>
                <p class="page-subtitle">通过QQ邮箱验证码重置您的密码</p>
                
                <!-- 进度条 -->
                <div class="progress-steps">
                    <div class="progress-bar" id="progress-bar"></div>
                    
                    <div class="step active" id="step1">
                        <div class="step-icon">1</div>
                        <div class="step-label">验证邮箱</div>
                    </div>
                    
                    <div class="step" id="step2">
                        <div class="step-icon">2</div>
                        <div class="step-label">输入验证码</div>
                    </div>
                    
                    <div class="step" id="step3">
                        <div class="step-icon">3</div>
                        <div class="step-label">设置新密码</div>
                    </div>
                </div>
                
                <!-- 步骤1：验证邮箱 -->
                <div class="step-content active" id="step1-content">
                    <div class="form-group">
                        <label class="form-label" for="email">QQ邮箱</label>
                        <div class="input-with-icon">
                            <input type="email" id="email" class="form-input" placeholder="请输入您的QQ邮箱">
                            <i class="fas fa-envelope input-icon"></i>
                        </div>
                    </div>
                    
                    <div class="form-actions">
                        <button class="next-button" id="step1-next">下一步</button>
                    </div>
                </div>
                
                <!-- 步骤2：输入验证码 -->
                <div class="step-content" id="step2-content">
                    <div class="form-group">
                        <label class="form-label">验证码</label>
                        <div class="code-input-container">
                            <div class="input-with-icon code-input">
                                <input type="text" id="verification-code" class="form-input" placeholder="请输入6位验证码" maxlength="6">
                                <i class="fas fa-key input-icon"></i>
                            </div>
                            <button class="send-code-button" id="send-code-button">发送验证码</button>
                        </div>
                        <p style="font-size: 0.85rem; color: var(--text-light); margin-top: 8px;">
                            验证码已发送至：<span id="email-display"></span>
                        </p>
                    </div>
                    
                    <div class="form-actions">
                        <button class="back-step-button" id="step2-back">上一步</button>
                        <button class="next-button" id="step2-next">下一步</button>
                    </div>
                </div>
                
                <!-- 步骤3：设置新密码 -->
                <div class="step-content" id="step3-content">
                    <div class="form-group">
                        <label class="form-label" for="new-password">新密码</label>
                        <div class="input-with-icon">
                            <input type="password" id="new-password" class="form-input" placeholder="请输入新密码">
                            <i class="fas fa-lock input-icon"></i>
                        </div>
                        <div class="password-strength">
                            <div class="password-strength-bar" id="password-strength-bar"></div>
                        </div>
                        <div class="password-requirements">
                            <div class="requirement invalid" id="length-req">
                                <i class="fas fa-circle"></i>
                                <span>至少8个字符</span>
                            </div>
                            <div class="requirement invalid" id="letter-req">
                                <i class="fas fa-circle"></i>
                                <span>包含字母</span>
                            </div>
                            <div class="requirement invalid" id="number-req">
                                <i class="fas fa-circle"></i>
                                <span>包含数字</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label" for="confirm-password">确认新密码</label>
                        <div class="input-with-icon">
                            <input type="password" id="confirm-password" class="form-input" placeholder="请再次输入新密码">
                            <i class="fas fa-lock input-icon"></i>
                        </div>
                        <p style="font-size: 0.85rem; color: #dc3545; margin-top: 8px; display: none;" id="password-mismatch">
                            <i class="fas fa-exclamation-circle"></i>
                            两次输入的密码不一致
                        </p>
                    </div>
                    
                    <div class="form-actions">
                        <button class="back-step-button" id="step3-back">上一步</button>
                        <button class="submit-button" id="step3-submit">重置密码</button>
                    </div>
                </div>
                
                <!-- 成功页面 -->
                <div class="step-content" id="success-content">
                    <div class="success-message">
                        <div class="success-icon">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <h2 class="success-text">密码重置成功！</h2>
                        <p style="color: var(--text-light); margin-bottom: 30px;">
                            您的密码已成功重置，请使用新密码登录您的账户。
                        </p>
                        <a href="login.html" class="login-button">立即登录</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <i class="fas fa-graduation-cap"></i>
                    <span>青南学长平台</span>
                </div>
                
                <div class="footer-links">
                    <a href="about.html" class="footer-link">关于我们</a>
                    <a href="about.html" class="footer-link">联系我们</a>
                    <a href="provisions.html" class="footer-link">隐私政策</a>
                    <a href="provisions.html" class="footer-link">使用条款</a>
                </div>
            </div>
            
            <div class="copyright">
                © 2025 青南学长平台 - 为学习和教育搭建桥梁
            </div>
        </div>
    </footer>

    <script>
        // 全局变量
        let currentStep = 1;
        let countdown = 0;
        let countdownInterval;
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化步骤
            updateProgress();
            
            // 步骤1下一步按钮点击事件
            document.getElementById('step1-next').addEventListener('click', function() {
                const email = document.getElementById('email').value.trim();
                
                // 验证邮箱格式
                if (!email) {
                    alert('请输入QQ邮箱');
                    return;
                }
                
                if (!email.endsWith('@qq.com')) {
                    alert('请输入正确的QQ邮箱格式');
                    return;
                }
                
                // 保存邮箱并显示在下一步
                document.getElementById('email-display').textContent = email;
                
                // 进入下一步
                currentStep = 2;
                updateProgress();
            });
            
            // 步骤2上一步按钮点击事件
            document.getElementById('step2-back').addEventListener('click', function() {
                currentStep = 1;
                updateProgress();
            });
            
            // 步骤2下一步按钮点击事件
            document.getElementById('step2-next').addEventListener('click', function() {
                const code = document.getElementById('verification-code').value.trim();
                
                // 验证验证码
                if (!code) {
                    alert('请输入验证码');
                    return;
                }
                
                if (code.length !== 6) {
                    alert('验证码应为6位数字');
                    return;
                }
                
                // 进入下一步
                currentStep = 3;
                updateProgress();
            });
            
            // 步骤3上一步按钮点击事件
            document.getElementById('step3-back').addEventListener('click', function() {
                currentStep = 2;
                updateProgress();
            });
            
            // 步骤3提交按钮点击事件
            document.getElementById('step3-submit').addEventListener('click', function() {
                const newPassword = document.getElementById('new-password').value;
                const confirmPassword = document.getElementById('confirm-password').value;
                
                // 验证密码
                if (!newPassword) {
                    alert('请输入新密码');
                    return;
                }
                
                if (newPassword !== confirmPassword) {
                    document.getElementById('password-mismatch').style.display = 'block';
                    return;
                }
                
                // 在实际应用中，这里应该发送重置密码请求到后端
                // 这里只是模拟重置过程
                const submitButton = document.getElementById('step3-submit');
                submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 重置中...';
                submitButton.disabled = true;
                
                setTimeout(function() {
                    // 显示成功页面
                    currentStep = 4;
                    updateProgress();
                }, 1500);
            });
            
            // 发送验证码按钮点击事件
            document.getElementById('send-code-button').addEventListener('click', function() {
                const email = document.getElementById('email').value.trim();
                
                if (!email) {
                    alert('请先输入QQ邮箱');
                    return;
                }
                
                // 在实际应用中，这里应该发送请求到后端API
                // 这里只是模拟发送验证码过程
                const sendButton = document.getElementById('send-code-button');
                sendButton.disabled = true;
                countdown = 60;
                
                // 更新按钮文本
                sendButton.textContent = `${countdown}秒后重新发送`;
                
                // 开始倒计时
                countdownInterval = setInterval(function() {
                    countdown--;
                    sendButton.textContent = `${countdown}秒后重新发送`;
                    
                    if (countdown <= 0) {
                        clearInterval(countdownInterval);
                        sendButton.disabled = false;
                        sendButton.textContent = '发送验证码';
                    }
                }, 1000);
                
                // 模拟发送成功
                alert(`验证码已发送至 ${email}，请查收（模拟发送）`);
            });
            
            // 密码强度检查
            document.getElementById('new-password').addEventListener('input', function() {
                checkPasswordStrength(this.value);
            });
            
            // 确认密码检查
            document.getElementById('confirm-password').addEventListener('input', function() {
                const newPassword = document.getElementById('new-password').value;
                const confirmPassword = this.value;
                
                if (confirmPassword && newPassword !== confirmPassword) {
                    document.getElementById('password-mismatch').style.display = 'block';
                } else {
                    document.getElementById('password-mismatch').style.display = 'none';
                }
            });
        });
        
        // 更新进度条和步骤显示
        function updateProgress() {
            // 更新进度条宽度
            const progressBar = document.getElementById('progress-bar');
            progressBar.style.width = `${((currentStep - 1) / 3) * 100}%`;
            
            // 更新步骤状态
            for (let i = 1; i <= 3; i++) {
                const step = document.getElementById(`step${i}`);
                const stepContent = document.getElementById(`step${i}-content`);
                
                if (i < currentStep) {
                    step.classList.add('completed');
                    step.classList.remove('active');
                    stepContent.classList.remove('active');
                } else if (i === currentStep) {
                    step.classList.add('active');
                    step.classList.remove('completed');
                    stepContent.classList.add('active');
                } else {
                    step.classList.remove('active', 'completed');
                    stepContent.classList.remove('active');
                }
            }
            
            // 显示成功页面
            const successContent = document.getElementById('success-content');
            if (currentStep === 4) {
                successContent.classList.add('active');
            } else {
                successContent.classList.remove('active');
            }
        }
        
        // 检查密码强度
        function checkPasswordStrength(password) {
            let strength = 0;
            const strengthBar = document.getElementById('password-strength-bar');
            
            // 检查长度
            if (password.length >= 8) {
                strength += 25;
                document.getElementById('length-req').classList.remove('invalid');
                document.getElementById('length-req').classList.add('valid');
                document.getElementById('length-req').innerHTML = '<i class="fas fa-check-circle"></i><span>至少8个字符</span>';
            } else {
                document.getElementById('length-req').classList.remove('valid');
                document.getElementById('length-req').classList.add('invalid');
                document.getElementById('length-req').innerHTML = '<i class="fas fa-circle"></i><span>至少8个字符</span>';
            }
            
            // 检查字母
            if (/[a-zA-Z]/.test(password)) {
                strength += 25;
                document.getElementById('letter-req').classList.remove('invalid');
                document.getElementById('letter-req').classList.add('valid');
                document.getElementById('letter-req').innerHTML = '<i class="fas fa-check-circle"></i><span>包含字母</span>';
            } else {
                document.getElementById('letter-req').classList.remove('valid');
                document.getElementById('letter-req').classList.add('invalid');
                document.getElementById('letter-req').innerHTML = '<i class="fas fa-circle"></i><span>包含字母</span>';
            }
            
            // 检查数字
            if (/[0-9]/.test(password)) {
                strength += 25;
                document.getElementById('number-req').classList.remove('invalid');
                document.getElementById('number-req').classList.add('valid');
                document.getElementById('number-req').innerHTML = '<i class="fas fa-check-circle"></i><span>包含数字</span>';
            } else {
                document.getElementById('number-req').classList.remove('valid');
                document.getElementById('number-req').classList.add('invalid');
                document.getElementById('number-req').innerHTML = '<i class="fas fa-circle"></i><span>包含数字</span>';
            }
            
            // 检查特殊字符
            if (/[^a-zA-Z0-9]/.test(password)) {
                strength += 25;
            }
            
            // 更新强度条
            strengthBar.style.width = `${strength}%`;
            
            // 设置颜色
            if (strength < 50) {
                strengthBar.style.background = '#dc3545'; // 红色
            } else if (strength < 75) {
                strengthBar.style.background = '#ffc107'; // 黄色
            } else {
                strengthBar.style.background = '#28a745'; // 绿色
            }
        }
    </script>
</body>
</html>